<template>
	<view class="container">
		<!-- 文章标题 -->
		<view class="article-title">{{ article.title}}</view>
		<image class="Image" :src="article.image" mode=""></image>
		<!-- 作者和发布日期 -->
		<!-- 		<view class="article-meta">
			<text class="author">作者：{{ article.author }}</text>
			<text class="publish-date">发布日期：{{ formatDate(article.publishDate) }}</text>
		</view> -->

		<!-- 文章内容 -->
		<view class="article-content" v-html="article.txt"></view>
	</view>
</template>

<script>
	import store from '@/store/index.js'
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				id: 0,
				article: {
					name: 1
				},
			}
		},

		methods: {
			formatDate(dateString) {
				const date = new Date(dateString);
				return date.toLocaleDateString();
			},
			onLoad: function(option) {
				//option为object类型，会序列化上个页面传递的参数
				this.id = option.id
				console.log("参数：" + this.id); //打印出上个页面传递的参数。
				this.article = this.getIntroduceId(this.id);
			},

		},
		computed: {
			...mapGetters('course', ['getIntroduceId']),
		},


	}
</script>

<style lang="scss" scoped>
	/* 使用 rpx 单位进行样式设置 */
	.container {
		padding: 30rpx;
	}

	.Image {
		width: 690rpx;
		border-radius: 40rpx;
	}

	.article-title {
		font-size: 56rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.article-meta {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 40rpx;
	}

	.author {
		margin-right: 20rpx;
	}

	.publish-date {
		color: #999;
	}

	.article-content {
		font-size: 32rpx;
		line-height: 1.5;
		margin-top: 20rpx;
	}
</style>